<template>
  <div>
    <el-card class="box-card">
      <h3>广告审核</h3>
      <div class="clearfix card-title">
        <el-menu
          :default-active="'1'"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#6d94c9"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1" @click="getAds(0)" >待审核</el-menu-item>
          <el-menu-item index="2" @click="getAds(1)" >已通过</el-menu-item>
          <el-menu-item index="3" @click="getAds(2)" >已拒绝</el-menu-item>
        </el-menu>
      </div>
      <el-row>
        <div class="tip">{{tip}}</div>
        <el-col :span="5" v-for="(ad,index) in ads" :key="ad.id" :offset="index % 4 === 0 ? 0 : 1" class="line">
          <el-card :body-style="{ padding: '20px' }" shadow="hover" class="card">
            <img  :src="that.$common.getResourceUrl(ad.image)" class="image">
            <div style="margin-top: 25px;">
              <div class="el-card-text">
                广告竞价：{{ad.price}}
              </div>
              <div class="btn-group clearfix">
                <el-button v-if="currentStatus === 0" type="success" @click="updateAd(ad,1)" icon="el-icon-success" circle></el-button>
                <el-button v-if="currentStatus === 0" type="danger"  @click="updateAd(ad,2)" icon="el-icon-error" circle></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="pagination-container">
        <el-pagination v-if="itemTotal > 0"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageIndex"
                       :page-sizes="[1, 4, 8]"
                       :page-size="pageCount"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="itemTotal">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AdministratorAdContainer',
  data () {
    return {
      that: this,
      ads: '',
      currentStatus: 0,
      itemTotal: 0,
      pageIndex: 1,
      pageCount: 4,
      tip: ''
    }
  },
  created () {
    this.getAds(0)
  },
  methods: {
    getAds (status) {
      if (status !== this.currentStatus) {
        this.pageIndex = 1
        this.pageCount = 4
        this.currentStatus = status
      }
      this.$administratorAPI.get_ads(status, this.pageIndex, this.pageCount).then((params) => {
        console.log(params.data)
        if (params.data.itemTotal > 0) {
          this.ads = params.data.items
          this.itemTotal = params.data.itemTotal
          this.tip = ''
        } else {
          this.ads = ''
          this.itemTotal = 0
          this.pageIndex = 0
          this.pageCount = 0
          this.tip = '没有数据'
        }
      }).catch((params) => {
        this.$alert(params.message)
      })
    },
    handleSizeChange (val) {
      this.pageCount = val
      this.getAds(this.currentStatus)
    },
    handleCurrentChange (val) {
      this.pageIndex = val
      this.getAds(this.currentStatus)
    },
    updateAd (ad, status) {
      ad.status = status
      console.log(JSON.stringify(ad))
      this.$administratorAPI.update_ad(ad).then((params) => {
        this.ads.splice(this.ads.indexOf(params.data), 1)
        this.$alert('操作成功')
      }).catch((params) => {
        this.$alert(params.message)
      })
    }
  }
}
</script>

<style scoped>
  .card-content {
    width: 80%;
    margin-left: 10%;
    padding: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
  }
  .image {
    width: 100%;
    height: 200px;
    display: block;
  }
  .line {
    padding-bottom: 20px;
  }
  .card {
    border-top: 3px solid #ffc638;
    border-radius: 10px;
  }
  img{
    cursor: pointer;
    transition: all 1.2s;
  }
  img:hover{
    transform: scale(1.3);
  }
  .el-card-text{
    margin-bottom: 7px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 72%;
    margin-left: 11%;
    margin-bottom: 30px;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
  }
  .card-title{
    font-size: 25px;
    margin-bottom: 25px;
  }
  .pagination-container{
    margin-top: 20px;
  }
  .btn-group{
    text-align: center;
    padding: 15px 0px 5px 5px;
  }
</style>
